<template>
  <view class="page">
    <view class="addcontent">
      <view class="title">上传轮播图</view>
      <view class="upload">
        <upload-image :defaultList="fileList" @uploaded="uploadedCarousel"></upload-image>
        <view class="tips">
          750px*300px
        </view>
      </view>
      <view class="title type">链接类型</view>
      <view class="cycle-box">
        <view class="cycle" :class="{'cycle-active': formData.type == key}" v-for="(item, key) in carouselTypeData" :key="key" @click="handleChangeType(key)">
          <image v-if="formData.type == key" class="cycleimg" src="../../static/images/cycleimg.png" mode=""></image>
          {{item}}
        </view>
      </view>
      <fui-form-item v-if="formData.type != 1" label="关联链接" arrow arrowColor="#999999" prop="range" labelWeight="600" :left="0" labelSize="28" @click="handleToSelectLink">
        <fui-input :borderBottom="false" :padding="[0]" placeholder="请选择轮播图关联的链接" v-model="showLinkUrl" size="28" disabled></fui-input>
      </fui-form-item>
    </view>
    <fui-button :disabled="false" :margin="['80rpx','0','0','0 ']" height="80rpx" disabledBackground="#DFDFDF" disabledColor="#666666" background="var(--fui-color-primary)" bold @click="handleSubmit">提交</fui-button>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import { setTitle } from '@/utils/common'
import carouselApi from '@/api/carousel'
import uploadImage from '@/components/upload/image'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const carouselTypeData = computed(() => store.getters.carouselTypeData)

const formData = ref({
  imgUrl: '',
  type: '1',
  linkUrl: '',
})

const fileList = ref([])

onLoad(option => {
  if (option.formData) {
    setTitle('修改轮播图')
    formData.value = JSON.parse(decodeURIComponent(option.formData))
    fileList.value = [formData.value.imgUrl]
  }
})

const handleChangeType = (type) => {
  formData.value.type = type
  if (type === '1') {
    formData.value.linkUrl = ''
  }
}

const uploadedCarousel = (urls) => {
  formData.value.imgUrl = urls[0] || ''
}

const handleToSelectLink = (() => {
  if (formData.value === '2') {
    tab.navigateTo('/pages/carousel/activity')
  } else {
    tab.navigateTo(`/pages/carousel/goods?checkedId=${formData.value.linkUrl}`)
  }
})

const showLinkUrl = computed(() => formData.value.linkUrl ? `/pages_shop/goods/detail?id=${formData.value.linkUrl}` : '')

onShow(() => {
  uni.$once('onCheckedGoods', goodsId => {
    formData.value.linkUrl = goodsId
  })
})

const handleSubmit = () => {
  if (!formData.value.imgUrl) {
    modal.msgError('请先上传轮播图！')
    return
  }

  if (formData.value.type !== '1' && !formData.value.linkUrl) {
    modal.msgError('请先上选择关联链接！')
    return
  }

  if (formData.value.id) {
    try {
      carouselApi.updateCarouselItem(formData.value).then(res => {
        if (res.code === 0) {
          modal.msg('轮播图已修改！')
          setTimeout(() => {
            tab.navigateBack()
          }, 1000)
        } else {
          modal.msgError('轮播图修改失败！')
        }
      })
    } catch(err) {
      modal.msgError('轮播图修改失败！')
    }
  } else {
    try {
      carouselApi.addCarouselItem(formData.value).then(res => {
        if (res.code === 0) {
          modal.msg('轮播图已添加！')
          setTimeout(() => {
            tab.navigateBack()
          }, 1000)
        } else {
          modal.msgError('轮播图添加失败！')
        }
      })
    } catch(err) {
      modal.msgError('轮播图添加失败！')
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
  padding: 30rpx 36rpx;
}

.page {
  .addcontent {
    padding: 30rpx;
    background: #ffffff;
    opacity: 1;
    border-radius: 16rpx;

    .title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
    }

    .upload {
      padding-top: 20rpx;

      .tips {
        font-size: 20rpx;
        font-weight: 400;
        color: #999999;
        margin-top: 14rpx;
        padding-left: 8rpx;
      }
    }

    .type {
      margin-top: 30rpx;
    }

    .cycle-box {
      display: flex;
      align-items: center;
      margin-top: 20rpx;

      .cycle {
        width: 160rpx;
        height: 64rpx;
        background: #f5f7fe;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        opacity: 1;
        border: 2rpx solid #e7ebfb;
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #333333;
        text-align: center;
        line-height: 64rpx;
        margin-right: 20rpx;
        position: relative;
      }

      .cycle-active {
        font-weight: bold;
        color: var(--fui-color-primary);
        border: 2rpx solid var(--fui-color-primary);
      }

      .cycleimg {
        width: 30rpx;
        height: 27rpx;
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }

    ::v-deep.fui-form__wrap-inner {
      padding: 0 !important;
    }

    // .ui-upload-item__business{

    // }
  }
}
</style>